<template>
  <el-dialog title="详情页面" :visible.sync="show" width="1200px" append-to-body :before-close="close">
    <el-form ref="form" label-position="left" :model="form" label-width="140px">
      <el-divider content-position="center">基本信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="新生支付平台ID">
            {{ form.orderld }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商户交易订单号">
            {{ form.merOrderld }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商户显示名称">
            {{ form.displayName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品名称">
            {{ form.goodsName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品数量">
            {{ form.goodsCount }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品类别">
            {{ form.goodsType }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单金额">
            {{ form.orderAmount }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单币种">
            {{ form.orderCurrencyCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="贸易类型">
            {{ form.tradeType }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="支付方式">
            {{ form.payType }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目标机构资金代码">
            {{ form.orgCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款方账户">
            {{ form.payerAccount }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="交易币种">
            {{ form.payCurrencyCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结算币种">
            {{ form.settleCurrencyCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分账标识">
            {{ form.shareFlag }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="子订单/分账订单信息">
            {{ form.subMerchantOrderDetails }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="center">商户信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商户用户号">
            {{ form.customerld }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商户用户类型">
            {{ form.customerType }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商户用户姓名">
            {{ form.customerName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商户用户证件号">
            {{ form.customerldNo }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商户用户手机号">
            {{ form.customerTel }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商户用户银行卡号">
            {{ form.bankCardNo }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商户用户银行卡类型">
            {{ form.bankCardType }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有效期">
            {{ form.expireData }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="信用卡安全码">
            {{ form.cvn }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="备注">
            {{ form.remark }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保留字段1">
            {{ form.reserve1 }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信APPID">
            {{ form.reserve2 }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="预下单标识">
            {{ form.preOrderFlag }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信/支付宝支付人验证标识">
            {{ form.declareCheck }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付系统交易号">
            {{ form.dealld }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="状态">
            {{ form.item_status }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="完成时间">
            {{ form.completeTime }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
        <el-col :span="24">
          <el-button size="medium" @click="close()">关 闭</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 40%;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-dialog:not(.is-fullscreen) {
  margin-top: 6vh !important;
  margin-bottom: 6vh !important;
}
</style>
<script>
export default {
  name: 'OrderDetails',
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    show: {
      type: Boolean
    }
  },
  data() {
    return {
    }
  },
  watch: {
    show(val) {
      if (val) {
        console.log(this.form)
      }
    }
  },
  created() {
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    }
  }
}
</script>
